<template>
  <div class="bodyCard">
    <a-card>
      <a-table
          rowKey="objectId"
          :pagination="this.pagination"
          :columns="columns"
          :data-source="this.modelList"
          @change="handlePageChange"
      >
        <span slot="action" slot-scope="text">
          <span v-if="text.status == 1">
            <a @click="enter(text.objectId)">进入模型</a>
            <a-divider type="vertical"/>
          </span>
          <span v-if="text.status == 0">
            <a @click="handleMust(text.objectId)">创建必备字段</a>
            <a-divider type="vertical"/>
          </span>
          <a @click="handleEdit(text.objectId)">重命名</a>
          <a-divider type="vertical"/>
          <a-popconfirm
              title="确定删除吗？"
              @confirm="confirm(text.objectId)"
          >
              <a-icon slot="icon" type="question-circle-o" style="color: red"/>
              <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import {mapActions, mapMutations, mapState} from 'vuex'

export default {
  name: "ModelBody",
  data() {
    return {
      columns: [
        {
          title: '序号',
          align: 'center',
          customRender: (text, record, index) => {
            return (this.pagination.current - 1) * 10 + index + 1
          },
          width: 100
        },
        {
          title: '模型标签',
          dataIndex: 'label',
          key: 'label',
          align: 'center',
        },
        {
          title: '实体名',
          dataIndex: 'entityName',
          key: 'entityName',
          align: 'center',
        },
        {
          title: '事件ID',
          dataIndex: 'entryName',
          key: 'entryName',
          align: 'center',
        },
        {
          title: '唯一标识',
          dataIndex: 'guid',
          key: 'guid',
          align: 'center',
        },
        {
          title: '事件时间',
          dataIndex: 'referenceDate',
          key: 'referenceDate',
          align: 'center',
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: {customRender: 'action'},
          align: "center",
          width: 300
        }
      ]
    }
  },
  computed: {
    ...mapState('modelManage', ['modelList', 'pagination'])
  },
  methods: {
    ...mapMutations('modelManage', ['setState']),
    ...mapActions('modelManage', ['queryModelList', 'deleteModel']),
    handlePageChange(page) {
      let {current, pageSize} = page
      this.queryModelList({current, pageSize})
    },
    handleEdit(key) {
      this.setState({name: 'modalTitle', value: '重命名'})
      this.setState({name: 'currentKey', value: key})
      this.setState({name: 'modalVisible', value: true})
    },
    confirm(key) {
      this.deleteModel(key).then(() => {
        this.queryModelList()
      })
    },
    handleMust(key) {
      this.setState({name: 'currentKey', value: key})
      this.setState({name: 'mustVisible', value: true})
    },
    enter(key) {
      this.setState({name: 'currentKey', value: key})
      this.$router.push({path: `/tab/builder/${key}`})
    }
  }
}
</script>

<style scoped>
.bodyCard >>> .ant-card-body {
  padding: 0 !important;
}
</style>
